<template>
  <router-layout>
    <div class="Ranking">
      <div class="title">
        <img src="https://gw.alicdn.com/tfs/TB1g3JgOgDqK1RjSZSyXXaxEVXa-1125-321.png" alt>
      </div>
      <div class="list">
        <div class="listSet van-hairline--bottom" v-for="(item,index) in dataList" :key="index">
          <div class="five">
            <img
              class="medal"
              v-show="item.row_no == 1"
              src="https://gw.alicdn.com/tfs/TB1CnFlOmzqK1RjSZFjXXblCFXa-114-114.png"
              alt
            >
            <img
              class="medal"
              v-show="item.row_no == 2"
              src="https://gw.alicdn.com/tfs/TB1xxBqOcbpK1RjSZFyXXX_qFXa-114-114.png"
              alt
            >
            <img
              class="medal"
              v-show="item.row_no == 3"
              src="https://gw.alicdn.com/tfs/TB1ge0nOkvoK1RjSZPfXXXPKFXa-114-114.png"
              alt
            >
            <span v-if="index>2" class="rnking">{{item.row_no}}</span>
            <img
              class="profile"
              :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
              alt
            >
            <span>{{item.user_name}}</span>
            <p class="add">
              累计获得
              <i class="num">{{item.medal_nums}}</i> 个勋章
            </p>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { listMedalRanking } from "@/api/admin";
import TitleItem from "../../../components/public/title/title";

export default {
  name: "component_name",
  components: { TitleItem },
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    async initList() {
      let { data } = await listMedalRanking();
      this.dataList = data.data.rows;
    }
  },
  created: function() {
    this.initList();
  }
};
</script>
<style lang="scss" scoped>
.title {
  img {
    width: 100%;
  }
}
.list {
  background: #fff;
  margin-top: 7px;
}
.listSet {
  font-size: 14px;
  margin: 0px 10px;
  padding: 10px 0;
  display: flex;
}
.listSet span {
  padding-top: 16px;
  margin-left: 10px;
  font-size: 16px;
  position: relative;
}

.medal {
  margin-top: 8px;
  width: 34px;
  height: 34px;
  vertical-align: middle;
}
.profile {
  margin-left: 15px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
}
.rnking {
  font-size: 18px;
  color: #494949;
  font-weight: 700;
  width: 24px;
}
.five {
  display: flex;
}
.add {
  font-size: 12px;
  color: #a0a0a0;
  position: absolute;
  right: 0%;
  top: 45%;
}
.num {
  color: #4a90e2;
  font-size: 14px;
}
</style>
